<script setup lang="ts">
import { ref } from 'vue';
import { withQueryString } from '@/utils/router.utils';

const reportList = ref(
  [
    {
      type: '1',
      title: '门诊清单',
      desc: '包含门诊就诊记录、检查项目、用药情况',
      icon: 'icon-menzhenqingdan'
    },
    {
      type: '2',
      title: '检验报告',
      desc: '各类检验项目结果，包括血液、尿液等检验报告',
      icon: 'icon-jianyanbaogao'
    },
    {
      type: '3',
      title: '病理报告',
      desc: '组织病理学检查结果，包括标本信息',
      icon: 'icon-menzhenbinglibaogao'
    },
    {
      type: '4',
      title: '病历报告',
      desc: '详细的病历记录，包括病史、诊断、治疗报告',
      icon: 'icon-a-zu3999'
    },
    {
      type: '5',
      title: '彩超报告',
      desc: '超声检查结果，包括各部位超声图像及诊段报告',
      icon: 'icon-3-12yixueyingxiangxitong'
    },
    {
      type: '6',
      title: '医保结算单',
      desc: '超声检查结果，包括各部位超声图像及诊段报告',
      icon: 'icon-yibaojiesuandandayin'
    },
    {
      type: '7',
      title: '检查报告',
      desc: '各类检查项目结果，包括影像学、内镜等',
      icon: 'icon-jianchabaogaodan'
    },
    {
      type: '8',
      title: '处方打印',
      desc: '医生开具的处方单，包括药品名称等',
      icon: 'icon-chufang'
    }
  ]
);

const selectReport = ref([]);

function onSelectReport(item) {
  if (selectReport.value.includes(item.type)) {
    selectReport.value = selectReport.value.filter(i => i !== item.type);
  }
  else {
    selectReport.value.push(item.type);
  }
}

function handleNext() {
  uni.navigateTo({
    url: withQueryString('/pages/printService/reportConfirm', {})
  });
}
</script>

<template>
  <view class="report-list">
    <wd-checkbox-group v-model="selectReport">
      <view v-for="item in reportList" :key="item.type" class="report-item" @click="onSelectReport(item)">
        <view class="report-item__icon">
          <i class="iconfont" :class="[item.icon]" />
        </view>
        <view class="report-item__content">
          <view class="report-item__title">
            {{ item.title }}
          </view>
          <view class="report-item__desc">
            {{ item.desc }}
          </view>
        </view>
        <view class="report-item__check">
          <wd-checkbox shape="square" :model-value="item.type" />
        </view>
      </view>
    </wd-checkbox-group>

    <view class="flex-center">
      <view class="next-btn w-708">
        <wd-button block @click="handleNext">
          下一步
        </wd-button>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.report-list {
  padding: 10px 48px 57px;
  --wot-checkbox-bg: var(--bg-color);
  .report-item {
    @apply flex items-center;
    padding: 43px 30px;
    background: #f5f9ff;
    margin-top: 20px;
    border-radius: 20px;
    border: 2px solid rgba(255, 255, 255, 0.5);
    .report-item__icon {
      @apply flex-center;
      background: #e1ecff;
      border-radius: 20px;
      width: 114px;
      height: 124px;
      .iconfont {
        font-size: 76px;
        color: var(--primary);
      }
    }
    .report-item__content {
      margin-left: 34px;
      flex: 1;
      .report-item__title {
        font-size: 48px;
        font-weight: bold;
        color: var(--text-color);
      }

      .report-item__desc {
        font-size: 30px;
        color: #686869;
        margin-top: 14px;
      }
    }
    .report-item__check {
      @apply flex-center;
      --wot-checkbox-size: 58px;
      --wot-checkbox-square-radius: 29px;
      --wot-checkbox-checked-color: var(--primary);
      --wot-checkbox-icon-size: 48px;
      --wot-checkbox-bg: #eef6ff;
    }
  }

  .next-btn {
    --wot-button-medium-height: 124px;
    --wot-button-medium-fs: 42px;
    margin-top: 69px;

    :deep(.wd-button) {
      font-weight: bold;
    }
  }
}
</style>
